<div class="api-doc-component">
  <h2>
    <a [routerLink]="" fragment="{{apiDocs.className}}" ngbdFragment>
      <img src="img/link-symbol.svg" alt="Anchor link to: {{apiDocs.className}}"/>
    </a>
    <a (click)="trackSourceClick()" href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
  </h2>
  <p>{{apiDocs.description}}</p>
    <table class="table table-sm table-hover">
      <tbody>
        <tr>
          <td class="label-cell">Selector</td>
          <td class="content-cell"><code>{{apiDocs.selector}}</code></td>
        </tr>
        <tr *ngIf="apiDocs.exportAs">
          <td class="label-cell">Exported as</td>
          <td class="content-cell"><code>{{apiDocs.exportAs}}</code></td>
        </tr>
      </tbody>
    </table>

  <ng-template [ngIf]="apiDocs.inputs.length">
    <section>
      <h3>Inputs</h3>
      <table class="table table-sm table-hover">
        <tbody>
        <tr *ngFor="let input of apiDocs.inputs">
          <td class="label-cell"><code>{{input.name}}</code></td>
          <td class="content-cell">
            <div><i>Type: </i><code>{{ input.type }}</code></div>
            <ng-template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
              <div>
                <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
                <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
              </div>
            </ng-template>
            <div style="margin: 10px 0">{{ input.description }}</div>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </ng-template>

  <ng-template [ngIf]="apiDocs.outputs.length">
    <section>
      <h3>Outputs</h3>
      <table class="table table-sm table-hover">
        <tbody>
          <tr *ngFor="let output of apiDocs.outputs">
            <td class="label-cell"><code>{{output.name}}</code></td>
            <td class="content-cell">{{output.description}}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </ng-template>

  <ng-template [ngIf]="apiDocs.methods.length && apiDocs.exportAs">
    <section>
      <h3>Methods</h3>
      <table class="table table-sm table-hover">
        <tbody>
        <tr *ngFor="let method of apiDocs.methods">
          <td class="label-cell"><code>{{method.name}}</code></td>
          <td class="content-cell">
            <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
            <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
            <div style="margin: 10px 0">{{ method.description }}</div>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </ng-template>
</div>
<hr/>
